<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-4">
			<view class="flex flex-column grid-gap-4" v-if="list.length > 0">
				<view class="p-4 rounded-4 bg-white flex flex-center grid-gap-2 address-item shadow-light"
					v-for="(item, index) in list" :key="index"
					:class="item.is_default && mode === 'list' ? 'default-border' : ''">
					<uni-icons v-if="mode !== 'list'" :type="form.ids.includes(item.id) ? 'checkbox-filled' : 'circle'"
						:color="form.ids.includes(item.id) ? 'var(--xl-primary)' : 'var(--xl-placeholder)'" size="20"
						@tap="onClickItem(item)"></uni-icons>
					<view class="flex-1 flex flex-column grid-gap-2" @tap="onClickItem(item)">
						<view class="flex grid-gap-2">
							<text class="font-weight-600">{{ item.name }}</text>
							<text class="text-grey h9">{{ item.mobile }}</text>
						</view>
						<text class="h9 font-weight-600">{{ item.address_detail }}</text>
						<text>
							<text class="h9 text-grey mr-1">{{ item.province }}</text>
							<text class="h9 text-grey mr-1">{{ item.city }}</text>
							<text class="h9 text-grey mr-1">{{ item.area }}</text>
							<text class="h9 text-grey mr-1" v-if="item.street">{{ item.street }}</text>
						</text>
						<view class="flex flex-y-center" v-if="!item.latitude || !item.longitude">
							<uni-icons type="info" color="var(--xl-danger)"></uni-icons>
							<text class="h10 text-danger">点击重新选取地址</text>
						</view>
					</view>
					<uni-icons type="right" color="var(--xl-placeholder)"
						@tap="$page.open('/pages/user/address/save?id=' + item.id, true)"
						v-if="mode === 'list'"></uni-icons>
					<text class="default-icon">默认</text>
				</view>
			</view>
			<view class="vh-50 flex flex-center" v-else>
				<x-empty text="暂无数据"></x-empty>
			</view>

			<view class="flex grid-gap-4 flex-center">
				<view class="px-6 py-4 text-primary font-weight-600 h9" @tap="mode = 'delete'" v-if="mode === 'list'">管理
				</view>
				<view class="px-6 py-4 text-success font-weight-600 h9" @tap="mode = 'list'"
					v-else-if="mode !== 'list'">完成
				</view>
				<button class="btn-primary btn-round flex-1" @tap="$page.open('/pages/user/address/save', true)"
					v-if="mode === 'list'">添加地址</button>
				<button class="btn-danger btn-round flex-1" @tap="deleteAddress"
					v-else-if="mode === 'delete'">删除</button>
			</view>
		</view>

		<x-loading v-if="loading" />
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { $api, $message, $page } from "@/utils";
import { onLoad, onShow } from '@dcloudio/uni-app';
const loading = ref(false);
const mode = ref('list');
const list = ref([]);
const eventName = ref<string>();
const form = ref({
	ids: []
})
watch(() => mode.value, (value: string) => {
	if (value === 'list') {
		form.value.ids = [];
	}
})
const onClickItem = (item: any) => {
	if (mode.value === 'delete') {
		if (form.value.ids.includes(item.id)) {
			form.value.ids = form.value.ids.filter((id: any) => id !== item.id);
		} else {
			form.value.ids.push(item.id);
		}
		return;
	}
	if (eventName.value && item.latitude && item.longitude) {
		uni.$emit(eventName.value, item);
		$page.back();
	} else {
		$page.open('/pages/user/address/save?id=' + item.id, true)
	}
}
const getList = () => {
	loading.value = true;
	$api.Address.getAddress().then((data: any) => {
		list.value = data;
		loading.value = false;
	}).catch((err: any) => {
		loading.value = false;
		$message.error(err.msg);
	});
}
const deleteAddress = () => {
	if (form.value.ids.length === 0) {
		$message.info('请选择要删除的地址');
		return;
	}
	uni.showModal({
		title: '提示',
		content: '确定删除选中的地址吗？',
		success: (res: any) => {
			if (res.confirm) {
				loading.value = true;
				$api.Address.deleteAddress(form.value).then(() => {
					$message.success('删除成功');
					mode.value = 'list';
					getList();
				}).catch((err: any) => {
					loading.value = false;
					$message.error(err.msg);
				});
			}
		}
	});
}
onLoad((options: any) => {
	if (options.event) {
		eventName.value = options.event;
	}
})
onShow(() => {
	loading.value = true;
	mode.value = 'list';
	getList();
})
</script>

<style lang="scss" scoped>
.address-item {
	position: relative;
	border: 2px solid #FFFFFF;

	.default-icon {
		display: none;
		position: absolute;
		top: -1px;
		right: -1px;
		background-color: var(--xl-primary-light-1);
		color: var(--xl-primary-light-9);
		padding: 2px 6px;
		border-radius: 0 8px 0 8px;
		font-size: 12px;
	}

	&.default-border {
		border-color: var(--xl-primary-light-1);

		.default-icon {
			display: block;
		}
	}
}
</style>
